<div class="grid-100 Top-Bar">
    <div class="grid-10">
        <a href="javascript:void(0)">
                    <img src="assets/img/sso/unis-co.png" style="width:150px; height:60px" alt="logo" class="logo-default" />
                </a>
    </div>
    <div class="grid-90 Valley" style="line-height:60px">
        <div class="grid-25">
            <span>Transload</span>
        </div>
        <div class="grid-25">
            <span>&nbsp;</span>
        </div>
        <div class="grid-50">
            <span style="float:right">Shipping</span>
        </div>

    </div>

</div>
<div class="grid-100 Top-Bar" style=" height: 50px;font-size: 18px;">
    <div class="grid-20">
        <label>Start Time:{{baseInfo.startTime|amDateFormat:'YYYY-MM-DD HH:mm:ss'}}</label>
    </div>
    <div class="grid-30">
        <label>Duration:{{baseInfo.duration}}</label>
    </div>
    <div class="grid-30"><label>Status: {{baseInfo.status}}</label></div>
    <div class="grid-20" style="text-align: right;"><label>Current User: {{baseInfo.currentUser}}</label></div>
</div>
<div class="grid-100" style="padding:20px 10px 24px;background: #55626b;">
    <div class="grid-100">
        <div class="grid-100" style="border-radius: 2px;background-color: #ffffff;padding:20px 10px;font-size:18px">
            <div class="grid-100">
                <div class="grid-33 text-ellipsis">
                    <label title="{{shippedInfo.orderId}}">DN:{{shippedInfo.orderId}}</label>
                </div>
                <div class="grid-33 text-ellipsis">
                    <label title="{{shippedInfo.poNo}}">PO#:{{shippedInfo.poNo}}</label>
                </div>
                <div class="grid-33">
                    <label>Original Container#: {{shippedInfo.containerNo}}</label>
                </div>
            </div>
            <div class="grid-100">
                <div class="grid-33">
                    <label>Entry ID: <a ng-href="{{'#/cf/facility/window/checkin/' + shippedInfo.entryId + '/' + shippedInfo.entryId + '/carrier-info'}}" target="_blank">{{shippedInfo.entryId}}</a></label>
                </div>

                <div class="grid-33">
                    <label>UOM: {{shippedInfo.unitName}}</label>
                </div>
            </div>


        </div>


    </div>
    <div class="grid-100 monitor-container" style="padding-top: 20px;">
        <div class="grid-50 Rectangle" style="width: 20%;margin-right: 1%;  padding: 0px; height:300px">
            <div class="grid-100 Valley" style=" line-height: 150px;font-size: 30px; text-align: center;">
                <label>Current Dock#</label>
            </div>
            <div class="grid-100 Valley" style=" line-height:90px;font-size: 30px; text-align: center;">
                <label>{{scheduledDocumentView[0].dockName}}</label>
            </div>
        </div>
        <div class="grid-50 Rectangle" style="width: 79%;  padding: 0px; height:300px">
            <div class="rec-title">
                <div class="f-left Valley"><label> Transload Schedule</label></div>
                <div class="f-right F-type"><label> Page {{scheduledDocumentPager.currentPage}} of {{scheduledDocumentPager.totalPage}}</label></div>
            </div>
            <div class="grid-100" style="padding:0px">
                <table class="monitor-overview-table F-type">
                    <thead>
                        <tr>
                            <th>Total Qty</th>
                            <th>Total Received</th>
                            <th>Current Truck Loaded</th>
                            <th>Total Loaded</th>
                            <th>Total Loaded Progress</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="stepsProgress in scheduledDocumentView">
                            <td>{{stepsProgress.totalQty}}</td>
                            <td>{{stepsProgress.totalReceiveQty}}</td>
                            <td>{{stepsProgress.currentLoaded}}</td>
                            <td>{{stepsProgress.totalLoaded}}</td>
                            <td>
                                <div class="Rectangle-pie">
                                    <div ng-style="{'height':'14px','width':widthPer25(stepsProgress.totalLoadedProgress),'background':'#156998'}"></div>
                                </div>
                                <div class="Rectangle-pie">
                                    <div ng-style="{'height':'14px','width':widthPer50(stepsProgress.totalLoadedProgress),'background':'#156998'}"></div>
                                </div>
                                <div class="Rectangle-pie">
                                    <div ng-style="{'height':'14px','width':widthPer75(stepsProgress.totalLoadedProgress),'background':'#156998'}"></div>
                                </div>
                                <div class="Rectangle-pie">
                                    <div ng-style="{'height':'14px','width':widthPer100(stepsProgress.totalLoadedProgress),'background':'#156998'}"></div>
                                </div>
                                <div style="display:inline-block"> {{ widthPer(stepsProgress.totalLoadedProgress) }}</div>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>

    </div>
    <div class="grid-100 " style="padding-top: 20px;">
        <div class="grid-50 Rectangle" style="width: 59%;margin-right: 1%;  padding: 0px; height:300px;overflow: auto;">
            <div class="grid-100 Valley" style=" font-size: 18px;padding: 20px 30px;line-height: 30px;">
                <p ng-repeat="scannedCarton  in shippingScannedCartonLines">
                        <span ng-if="scannedCarton.status==='Success'"  ng-class="{'color-reds': scannedCarton.scanAction === 'Unload'}">{{formatSucessMessage(scannedCarton)}}</span>
                        <span ng-if="scannedCarton.status==='Failed'" style="color:rgb(204, 17, 17)">{{formatFailMessage(scannedCarton)}}</span>
                </p>

            </div>

        </div>
        <div class="grid-50 Rectangle" style="width: 40%; padding: 0px; height:300px;overflow: auto;">
            <div class="grid-100 Valley" style=" font-size: 18px;padding: 20px 30px;line-height: 30px;">

                <p ng-repeat="stepTimeline in shippingTimelines[0].timePoints ">
                    {{formatStander(stepTimeline.time)}} -- {{stepTimeline.timeType}} Step  
                </p>

            </div>

        </div>
    </div>
</div>